<template>
  <div class="peisong_main">
    <baidu-map
      ref="map"
      class="map"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      @ready="handler"
    >
      <bm-marker v-for="(row,i) in markerList" :key="i" :position="row" :animation="row.show?'BMAP_ANIMATION_BOUNCE':''" @click="infoWindowOpen(row)">
        <bm-label :content="row.name" :label-style="{color: 'red', fontSize : '14px'}" :offset="{width: 0, height: 30}" />
        <bm-info-window :auto-pan="true" :width="0" :height="500" style="overflow: auto;" :show="row.show" @close="infoWindowClose">
          <span>待派订单：</span>
          <lb-table
            ref="lbTable"
            class="table"
            border
            element-loading-text="加载中"
            :column="tableData02.column"
            :data="tableData02.data"
            height="100"
            style="overflow: auto;"
            align="center"
          />
          <br>
          <span>实时库存明细：</span>
          <lb-table
            ref="lbTable"
            class="table"
            border
            element-loading-text="加载中"
            :column="tableData03.column"
            :data="tableData03.data"
            style="overflow: auto;"
            max-height="300"
            align="center"
          />
        </bm-info-window>
      </bm-marker>
    </baidu-map>
    <div ref="right" class="right">
      <span style="height: 16px; font-size: 14px; font-weight: bold; color: #777;">配送员列表</span>
      <!-- <i class="el-icon-caret-right" @click="fold('right')" /> -->
      <el-form ref="form" label-width="0px">
        <el-form-item class="merge-item">
          <el-select v-model="qtype" style="width: 80px; margin-right: 2px;">
            <el-option :value="1" label="姓名" />
            <el-option :value="2" label="电话" />
          </el-select>
          <el-input v-model="txt" style="width: 190px; margin-right: 2px;" placeholder="请输入" />
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <lb-table
        ref="lbTable"
        class="table"
        border
        height="100%"
        highlight-current-row
        element-loading-text="加载中"
        :column="tableDataRight.column"
        :data="tableDataRight.data"
        style="overflow: auto;"
        align="center"
      />

    </div>

  </div>
</template>

<script>
  import { courierList, courierMapList, courierOrderwinData } from '@/api'
  import { parseTime } from '@/utils'
  export default {
    name: 'peisongyuan',
    data() {
      return {
        center: {
          lng: 0,
          lat: 0
        },
        BMap: {},
        map: {},
        show: true,
        qtype: 1,
        txt: '',
        zoom: 12,
        markerList: [],
        tableDataRight: {
          total: 0,
          column: [
            {
              type: 'index',
              width: 40
            },
            {
              label: '定位',
              width: 50,
              render: (h, { row }) =>
              <span onClick={() => this.getlocation(row)}>
                {row.lat && row.lng && <i class='el-icon-location' style='color:#F56C6C; cursor:pointer'/>}
              </span>
            },
            {
              prop: 'userName',
              label: '姓名'
            },
            {
              prop: 'uphone',
              label: '电话',
              width: 110
            },
            {
              prop: 'createTime',
              label: '最后定位时间',
              width: 210,
              render: (h, { row }) => <span>{ row.createTime && parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            }
          ],
          data: []
        },
        tableData02: {
          total: 0,
          column: [
            {
              prop: 'orderCode',
              label: '订单编号'
            },
            {
              prop: 'csmName',
              label: '客户姓名'
            },
            {
              prop: 'csmAddress',
              label: '地址'
            },
            {
              prop: 'csmPhone',
              label: '电话'
            }
          ],
          data: []
        },
        tableData03: {
          total: 0,
          column: [
            {
              prop: 'gtName',
              label: '商品类型'
            },
            {
              prop: 'goodsName',
              label: '商品名称',
              width: 110
            },
            {
              prop: 'gdStatus',
              label: '状态',
              render: (h, { row }) => <span>{this.gdStatus === 1 ? '重' : '轻'}</span>
            },
            {
              prop: 'gdCount',
              label: '数量'
            }
          ],
          data: []
        }
      }
    },
    methods: {
      handler({ BMap, map }) {
        // console.log(BMap, map)
        this.BMap = BMap
        this.map = map
        this.center.lng = 114.298572
        this.center.lat = 30.584355
        this.zoom = 16
        // var poi = new BMap.Point(116.307852, 40.057031)
        // map.centerAndZoom(poi, 16)
      },
      search() {
        this.getCourierList()
      },
      getlocation(row) {
        var point = new this.BMap.Point(row.lng, row.lat)
        console.log(this.map)
        this.map.centerAndZoom(point, 20)

        this.infoWindowOpen(row, row.userId)
      },
      // 获取右边的table数据  配送员列表
      async getCourierList() {
        const params = { }
        if (this.qtype * 1 === 1) {
          params['userName'] = this.txt
        } else if (this.qtype * 1 === 2) {
          params['uphone'] = this.txt
        }
        const res = await courierList(params)
        this.tableDataRight.data = await res.data
        await this.getCourierMapList()
      },
      // 获取配送员的地图信息
      async getCourierMapList() {
        const params = { }
        // if (this.qtype * 1 === 1) {
        //   params['userName'] = this.txt
        // } else if (this.qtype * 1 === 2) {
        //   params['uphone'] = this.txt
        // }
        const res = await courierMapList(params)
        const allMap = this.tableDataRight.data.map(item => {
          var data = res.data.find(i => item.userName === i.name)
          if (data) {
            1
          } else {
            data = { ...data, show: false }
          }
          return {
            ...item,
            ...data,
            createTime: data ? data.createTime : ''
          }
        })
        this.tableDataRight.data = [...allMap]
        // console.log(this.tableDataRight.data)
        this.markerList = res.data
      },
      infoWindowClose(row) {
        row.show = false
        this.markerList = [...this.markerList]
      },
      async infoWindowOpen(row, userId = null) {
        console.log(row)
        this.markerList.forEach(l => {
          l.show = false
        })
        // this.center = { lng: row.lng, lat: row.lat }
        const params = {
          userId: userId
        }
        if (!userId) {
          var obj = this.tableDataRight.data.find(l => l.userName === row.name)
          // console.log(obj)
          if (obj) {
            params.userId = obj.userId
            const res = await courierOrderwinData(params)
            this.tableData02.data = res.data.orderList
            this.tableData03.data = res.data.storeDetailList
          } else {
            this.tableData02.data = []
            this.tableData03.data = []
          }
          row.show = true
        } else {
          var rowItem = this.markerList.find(l => l.name === row.userName)
          const res = await courierOrderwinData(params)
          this.tableData02.data = res.data.orderList
          this.tableData03.data = res.data.storeDetailList
          rowItem.show = true
        }

        // this.markerList = [...this.markerList]
      },
      fold(refItem) {

      }
    }
  }
</script>

<style lang="scss" scoped>
  .peisong_main {
    display: flex;
    height: 100%;
    .map {
      width: 75%;
      height: 100%;
      flex-shrink: 0;
    }
    .right {
      width: 25%;
      height: 100%;
      padding: 4px;
      transition: all 0.3s;
      .table {
        width: 100%;
        height: calc(100% - 70px);
      }
    }
  }
</style>
